import { NButton } from 'naive-ui'
import type { StyleValue } from 'vue'
import { RouterLink } from 'vue-router'
import type { IButtonProps } from '@/typed/components'


const defaultContentStyle: StyleValue = {
	display: 'flex'
}
export default function AnyButton(props: IButtonProps, context: any) {
	const {
		custom,
		to,
		activeClass,
		exactActiveClass,
		ariaCurrentValue,
		replace,

		target = '_blank',

		contentStyle = defaultContentStyle,
		permission,
		...otherProps
	} = props
	const {slots} = context
	const {prefix, suffix, ...otherSlots} = slots

	otherSlots.default = (data: any) => (
		<div style={contentStyle}>
			{prefix && prefix()}
			{slots.default?.(data)}
			{suffix && suffix()}
		</div>
	)

	const DefaultButton = (props: any = {}) => {
		const op = {
			...otherProps,
			...props
		}
		return (
			<NButton {...op} v-permission={permission}>
				{otherSlots}
			</NButton>
		)
	}

	if (typeof to === 'string' && /^https?/.test(to)) {
		return (
			<a href={to} target={target} v-permission={permission}>
				{DefaultButton()}
			</a>
		)
	} else if (to) {
		return (
			<RouterLink
				{...{to, custom, activeClass, exactActiveClass, ariaCurrentValue, replace}}
				v-permission={permission}
			>
				{DefaultButton()}
			</RouterLink>
		)
	} else {
		return DefaultButton({})
	}
}
